<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
         <hr>
        <textarea placeholder="请输入要评论的内容（最多吐槽120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
            <div class="cmt-list">
                <div class="cmt-item" v-for="(item,i) in comment" :key="i">
                    <div class="title">
                    第一楼{{i + 1}}&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time}}
                    </div>
                    <div class="body">
                    {{item.content === 'undefined' ? '这个人懒，啥也没写' : item.content}}
                    </div>
                </div>
            </div>
        <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            pageindex:1,
            comment:[],
            msg:''
        }
    },
    created(){
        this.getComment()
    },
    methods:{
        getComment(){
            axios.get('http://www.lovegf.cn:8899/api/getcomments/' + this.cid + '?pageindex='+this.pageindex).then(res=>{
                if(res.data.status===0){
                    this.comment =this.comment.concat(res.data.message) 
                }
            })
        },
        getmore(){
            this.pageindex++;
            this.getComment()
        },
        postComment(){
            axios.post('http://www.lovegf.cn:8899/api/postcomment/'+this.cid).then(res=>{
                if(res.data.status===0){
                    let cmt = {user_name:'匿名用户',add_time:Date.now(),content:this.msg}
                    this.comment.unshift(cmt)
                    this.msg=''
                }
            })
        }
    },
    props:['cid']
}
</script>

<style lang="scss" scoped>
    .cmt-container{
        h3{
            font-size: 14px;
        }
        textarea{
            font-size:14px;
            height: 85px;
            margin: 0;
        }
        .cmt-list{
            margin:5px 0;
            .cmt-item{
                .cmt-title{
                    line-height: 35px;
                    background-color: #ccc;
                }
                .cmt-body{
                    line-height: 35px;
                    text-indent:2em;
                }
            }
        }
    }
    
</style>


